<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>navigator |</title>
<style>
		*{padding:0; margin:0}
		//img{border:0; display:block;}
		BODY {
			PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black;  PADDING-TOP: 10px; BACKGROUND-COLOR: white; TEXT-ALIGN: center;
			font-family:Arial, Helvetica, sans-serif;
		}
		.dis {
			DISPLAY: block
		}
		.undis {
			DISPLAY: none
		}
		#cntR {
			WIDTH: 650px; 
		}
		#TabTop {
			CLEAR: both; MARGIN-BOTTOM: 16px
		}
		#TabTop P {
			FLOAT: left; LINE-HEIGHT: 21px
		}
		#TabTop P.topTit {
			
		}
		#TabTop P.topC0 {
			BACKGROUND: #e9eef4; BORDER-LEFT: #fff 2px solid;  CURSOR: pointer;font-family:Arial, Helvetica, sans-serif; color:#3b5998;
		}
		#TabTop P.topC1 {
			BACKGROUND: #3b5998; BORDER-LEFT: #fff 2px solid;  COLOR: #fff;font-family:Arial, Helvetica, sans-serif;
		}
		#TabTop #TabTop_tit {
			BORDER-BOTTOM: #e9eef4 3px solid; HEIGHT: 21px; margin-left:30px
		}
		#TabTop #TabTop_cnt {
			PADDING-LEFT: 32px; LINE-HEIGHT: 26px; PADDING-TOP: 7px; HEIGHT: 260px;TEXT-ALIGN:LEFT;
		}
		#TabTop #TabTop_cnt A {
			COLOR: #666; TEXT-DECORATION: none
		}
		#TabTop #TabTop_cnt A:hover {
			COLOR: #c2130e; TEXT-DECORATION: underline
		}
</style>

</head>

<body>
<div align="center" style="width:100%"> 
<table width="90%"  border="0" cellpadding="0" cellspacing="0">
<!-----navigator--START-------->
  <tr width="100%" height="27" bgcolor="#3b5998">
    <td align="left" width="15%" id="idFacebook" style="color:#FFFFFF; font-size:20px;font-family:Arial, Helvetica, sans-serif;"><span id="idFacebook" style="cursor:hand;" onmouseover="this.style.color='#FF0000'" onmouseout="this.style.color='#FFFFFF';"><strong>&nbsp;Coonay</strong></span></td>
    <td align="left" width="8%" onmouseout="" onmouseover="" style="color:#FFFFFF; font-size:12px;  font-weight:100; font-family:Arial, Helvetica, sans-serif;cursor:hand;">
	  <span style="vertical-align:middle; z-index:10000; width:100%; id="idHome" onmouseover="this.parentNode.style.color='#FF0000';this.parentNode.style.fontSize='18px'" onmouseout="this.parentNode.style.color='#FFFFFF';this.parentNode.style.fontSize='12px'"><strong>Home</strong></span>
	  </td>
    <td align="left" width="8%" onmouseout="" onmouseover="" style="color:#FFFFFF; font-size:12px;  font-weight:100; font-family:Arial, Helvetica, sans-serif;cursor:hand;">
	  <span style="vertical-align:middle; z-index:10000; width:100%; id="idHome" onmouseover="this.parentNode.style.color='#FF0000';this.parentNode.style.fontSize='18px'" onmouseout="this.parentNode.style.color='#FFFFFF';this.parentNode.style.fontSize='12px'"><strong>Profile</strong></span>
	  </td>
    <td align="left" width="8%" onmouseout="" onmouseover="" style="color:#FFFFFF; font-size:12px;  font-weight:100; font-family:Arial, Helvetica, sans-serif;cursor:hand;">
	  <span style="vertical-align:middle; z-index:10000; width:100%; id="idFriends" onmouseover="this.parentNode.style.color='#FF0000';this.parentNode.style.fontSize='18px'" onmouseout="this.parentNode.style.color='#FFFFFF';this.parentNode.style.fontSize='12px'"><strong>Friends</strong></span>
	  </td>
    <td align="left" width="8%" onmouseout="" onmouseover="" style="color:#FFFFFF; font-size:12px;  font-weight:100; font-family:Arial, Helvetica, sans-serif;cursor:hand;">
	  <span style="vertical-align:middle; z-index:10000; width:100%; id="idIndex" onmouseover="this.parentNode.style.color='#FF0000';this.parentNode.style.fontSize='18px'" onmouseout="this.parentNode.style.color='#FFFFFF';this.parentNode.style.fontSize='12px'"><strong>Index</strong></span>
	  </td>
    <td width="5%"></td>
    <td width="5%"></td>
    <td width="6%"style="color:#FFFFFF; font-size:12px;font-family:Arial, Helvetica, sans-serif;cursor:hand;"  onmouseover="this.style.color='#FF0000';this.style.fontSize='15px'" onmouseout="this.style.color='#FFFFFF';this.style.fontSize='12px'">Settings</td>
    <td width="6%"style="color:#FFFFFF; font-size:12px;font-family:Arial, Helvetica, sans-serif;cursor:hand;"  onmouseover="this.style.color='#FF0000';this.style.fontSize='15px'" onmouseout="this.style.color='#FFFFFF';this.style.fontSize='12px'">Logout</td>
    <td width="5%" valign="middle" align="left" valign="middle"><input type="text" id="searchBox" width="100px;" height="90%" value="search" style="color:#CCCCCC; vertical-align:middle" onclick="this.value=''" onblur="this.value='search'"></td>
    <form onsubmit="javascript:alert('Hi, thanks for your click...')">
	<td width="5%" align="left" valign="middle"><input style="background-color:#CCCCCC; height:22px;width:60px" type="submit" value="submit"/></td>
	</form>
    <td width="5%"></td>
  </tr>
  <!----navigator---END------->

  <tr>
   <td colspan="12">&nbsp;</td>
 </tr>
  
  <tr style="width:100%">
   <td colspan="12" width="100%" align="left">
  		<table  width="100%" border="0">
		  <tr  width="100%">
			<!------TAB--START---------> 
			<td id="idYeqian" width="62%"  align="left">
				<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center"></td></tr>
				</table> 
			   <span id='feedback'></span> 
				<table width="101%" border="0" cellspacing="0" cellpadding="0">
				  <tr>
					<td align="center">	
					<DIV id="cntR">
					  <DIV id="TabTop">
							<DIV id="TabTop_tit">								
							  <P class="topTit" title="Don't Delete me"></P>
							  <P class="topC0"><strong>&nbsp;&nbsp;News Feed&nbsp;&nbsp;</strong></P>
							  <P class="topC0"><strong>&nbsp;&nbsp;Status Updates&nbsp;&nbsp;</strong></P>
							  <P class="topC0"><strong>&nbsp;&nbsp;Photos&nbsp;&nbsp;</strong></P>
							  <P class="topC0"><strong>&nbsp;&nbsp;Links&nbsp;&nbsp;</strong></P>
							  <P class="topC0"><strong>&nbsp;&nbsp;Live Feed&nbsp;&nbsp;</strong></P>
							</DIV>
							<DIV id="TabTop_cnt">
								
								<SPAN title="Don't delete me"></SPAN>

								<SPAN>
									<table align="center" width="100%" height="90%" border="0" cellpadding="0" cellspacing="1" bgcolor="#e9eef4">
										<tr>
											<td bgcolor="#FFFFFF">	
											<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1">	
												 <tr>
													 <td  align='center'>News Feed</td>
													 <td  colspan='3' ></td>
												</tr>
											</table>										
											</td>
									</tr>
								</table>
								</SPAN>
				
								<SPAN>
									<table align="center" width="100%" height="90%" border="0" cellpadding="0" cellspacing="1" bgcolor="#e9eef4">
										<tr>
											<td bgcolor="#FFFFFF">	
											<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1">	
												<tr>
													<td  align='center'>Status Updates</td>
													<td  colspan='3' ></td>
												</tr> 
											</table>											
											</td>
										</tr>
									</table>		
								</SPAN>
								
								<SPAN>
									<table align="center" width="100%" height="90%" border="0" cellpadding="0" cellspacing="1" bgcolor="#e9eef4">
										<tr>
											<td bgcolor="#FFFFFF">	
											<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1">	
												 <tr>
													 <td  align='center'>Photos</td>
													 <td  colspan='3' ></td>
												</tr>
											</table>										
											</td>
									</tr>
								</table>
								</SPAN>
								
								<SPAN>
									<table align="center" width="100%" height="90%" border="0" cellpadding="0" cellspacing="1" bgcolor="#e9eef4">
										<tr>
											<td bgcolor="#FFFFFF">	
											<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1">	
												 <tr>
													 <td  align='center'>Links</td>
													 <td  colspan='3' ></td>
												</tr>
											</table>										
											</td>
									</tr>
								</table>
								</SPAN>

								<SPAN>
									<table align="center" width="100%" height="90%" border="0" cellpadding="0" cellspacing="1" bgcolor="#e9eef4">
										<tr>
											<td bgcolor="#FFFFFF">	
											<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1">	
												 <tr>
													 <td  align='center'>Live Feed</td>
													 <td  colspan='3' ></td>
												</tr>
											</table>										
											</td>
									</tr>
								</table>
								</SPAN>							</DIV>  
					  </DIV>
					</DIV>					</td>
				  </tr>
				</table>			</td>
			<!------TAB--END-----------> 
			<td width="4%">&nbsp;</td>
			<!------WINDOW--START---------> 						
			<td width="34%" valign="top" height="100%" align="left">
			  <table width="100%" height="100%" border="0" cellspacing="1" bgcolor="#999999">
				<tr>
					<td bgcolor="#FFFFFF" valign="top" align="left">	
					<table width="100%" height="160" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#e9eef4">	
						 <tr>
							 <td colspan="3"><strong>&nbsp;Applications</strong></td>
							 <td width="10%"></td>
							 <td width="32%"></td>
							 <td width="12%" align="right">Edit&nbsp;</td>
						</tr>
						 
						 <tr>
							 <td></td>
						   <td style="color:#3b5998">Photos</td>
							 <td></td>
							 <td></td>
						   <td style="color:#3b5998">Event</td>
							 <td></td>
						</tr>
						
						 											
						 <tr>
							 <td colspan="3"><strong>&nbsp;More</strong></td>
							 <td width="10%"></td>
							 <td width="32%"></td>
							 <td width="12%" align="right"></td>
						</tr>					
					  </table>										
					</td>
				</tr>
		  <!------WINDOW--END-----------> 
		</table>
    </td>
  </tr>	
</table>

  </div>

</div>

    <SCRIPT>
        var Tags = document.getElementById('TabTop_tit').getElementsByTagName('p'); 
        //var TagsCnt = document.getElementById('TabTop_cnt').getElementsByTagName('span'); 
        var TagsCnt = document.getElementById('TabTop_cnt').childNodes; 
        var len = Tags.length; 
        var flag = 1;
        for( i = 1 ; i < len ; i++ )
        {
            Tags[i].value = i;
            Tags[i].onclick = function(){changeNav(this.value)}; 
	        TagsCnt[i].className = 'undis';            
        }
        Tags[flag].className = 'topC1';
     	TagsCnt[flag].className = 'dis';
        function changeNav(v)
        {    
            Tags[flag].className = 'topC0';
            TagsCnt[flag].className = 'undis';
            flag = v ;    
            Tags[v].className = 'topC1';
	        TagsCnt[v].className = 'dis';
        }
    </SCRIPT>


</body>
</html>
